<template>
    <transition name="menu-fade">
        <ul class="context-menu-wrapper" :style="menuStyle" v-bind="$attrs" v-show="visible" ref="contextmenu" @click.stop="handleClose">
            <li v-for="item in menuData" :key="item.label" v-show="!item.hide" @click="handleMenuClick(item.event)">{{item.label}}</li>
        </ul>
    </transition>
</template>

<script>
export default {
    name:'ContextMenu',
    inheritAttrs:false,
    props:{
        visible: {
            type: Boolean,
            default: false
        },
        menuData:{
            type: Array,
            default: () => []
        },
        parentRef:String,
        event: MouseEvent 
    },
    data(){
        return {
            scrollTop:0,
            parentCom:{},
            menuStyle:{}
        }
    },
    computed:{
        
    },
    watch:{
        event(e){
            let left = 0, top = 0;
            if(this.parentCom.offsetLeft){
                left = `${e.clientX -  this.parentCom.offsetLeft + 10}px`;
                top = `${e.clientY + this.scrollTop - this.parentCom.offsetTop}px`;
            }else{
                left = `${e.offsetX + e.target.offsetLeft + 10}px`;
                top = `${e.offsetY + e.target.offsetTop - this.scrollTop}px`;
            }
            this.menuStyle = { left, top};
        }
    },
    mounted(){
        let _this = this;
        //添加滚动监听事件
        this.initScrollListener();
        window.onclick = function(event) {
            _this.handleClose();
        }
        this.$nextTick(() => {
            let parentCom = this.$parent.$refs[this.parentRef];
            if(parentCom){
                parentCom.style.position="relative";
                this.parentCom = parentCom;
            }
        })
    },
    methods:{
        //初始化添加滚动监听事件
        initScrollListener(){
            window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件
            this.$once('hook:beforeDestroy',()=>{
                window.removeEventListener("scroll", this.handleScroll, true);
            })
        },
        //获取当前滚动值
        handleScroll(e) {
            this.scrollTop = e.target.scrollTop;
        },
        //关闭菜单弹框
        handleClose(){
            this.$emit('update:visible', false);
        },
        //菜单点击触发事件
        handleMenuClick(event){
            this.$emit(event)
        }
    }
}
</script>

<style lang="scss" scoped>
    .context-menu-wrapper{
        position: absolute;
        top: 0px;
        z-index: 9;
        padding: 5px 0;
        border-radius: 5px;
        background: #fff;
        color: #000;
        li{
            padding: 3px 20px;
            cursor: pointer;
            &:hover{
                background: lightgray;
            }
        }
    }
    .menu-fade-enter-active {
        animation: menu-fade-in .3s;
    }

    .menu-fade-leave-active {
        animation: menu-fade-out .3s;
    }

    @keyframes menu-fade-in {
        0% {
            transform: translate3d(0, -20px, 0);
            opacity: 0;
        }
        100% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }

    @keyframes menu-fade-out {
        0% {
            transform: translate3d(0, 0, 0);
            opacity: 0;
        }
        100% {
            transform: translate3d(0, -20px, 0);
            opacity: 0;
        }
    }
</style>